Create a fixed and interactive navigation sidebar with Axure 7.0 (Part I)

UI design is part of my daily work and I use Axure to build mock up screens all the time. Recently I have updated the tool to its latest 7.0 version and noticed that some of the new features it offers are quite useful. What I found to be the most useful are the ability to pull or push adjacent widgets when a widget is hidden or shown and the ability to break away the first state of dynamic panels.

My wife, a UX designer, thinks Axure is really counter-intuitive and she prefers to use Adobe Muse. I have to agree that in terms of building animation and graphic intense web apps, Adobe Muse is a better choice than Axure, but I think they are focused on different things. Axure is more focused on building a prototype for tools and enterprise applications. Just look at what it offers – page and widget events, repeater, dynamic panels –  all of these make it easier to build up pages with complicated logic.

In this article I am going to describe how to use Axure to build a navigation sidebar that stays on the page and  highlights the section the user is current in, which seems to be a feature that requires some logic controls. Ironically, my wife says this can be done easily with Muse.. I hope it is not true! On the bright side, this can still be done with Axure, just with a little bit more effort.

So this is what we want to achieve – a navigation sidebar that first appears on the right top corner. When page is scrolled and the sidebar is about to be out of the view, it starts to stay on the top. The menu items in the sidebar become selected/highlighted when the page is scrolled to the corresponding sections. Here is a demo.

Instead of jumping into the detailed steps, I think it is beneficial to firstly explain the solution a bit. To make this work, the central idea is to store the Y position of each section as the text of a hidden widget, which is the rectangle to the left of each section on my demo, and then when the window is scrolled, compare the Window.scrollY with the hidden widget’s text to determine whether the page is current scrolled into that section. The trick here is that you can compare a variable value with a widget’s text.

Now, the first step is to of course put all the widgets on the page including the widgets for storing the Y positions. They will later be hidden. I put the widget on the top of each section so that their Y position is the section’s Y position. Then on the onPageLoad event listener, save the Y position of each widget. In the below screenshot, I named these widget as PosA, PosB, PosC, and PosD. Note the ‘Target’ here is the hidden widget itself. It is a new feature introduced in Axure 7.

These actions effectively store the Y location of each section. Next we will add more actions so that when the page is scrolled to a section, the corresponding menu item is selected.

First assign menu items with a selection group to ensure only one item can be selected at a time.

Also set the menu items’ Selected style by selecting ‘Interaction Styles…’ in the above menu and go to Selected tab to define a Selected style.

Here comes the most important step. On the page’s OnWindowScroll event listener, add the following actions. These actions compare the Window.scrollY (how much the page has been scrolled) with the position of each section to determine whether the page is currently scrolled in the section

These steps are the essential parts for achieving the interactive navigation sidebar. However, without the sidebar staying on top of the view, we cannot see the end result (because the side bar is out of the view). Next time I will finish the tutorial with steps of making the side bar fixed in place. Stay tuned!